<template>
	<view class="custom_pay">
		<view class="main">
			<scroll-view
				:scroll-top="scrollTop"
				scroll-y="true"
				class="scroll_Y"
				@scrolltoupper="upper"
				@scrolltolower="lower"
				@scroll="scroll">
				<view class="pay_wrap">
					<view class="pay pay_box">
						<radio-group @change="handSelectd">
							<view
								class="pay_list"
								v-for="(item, index) in options.list"
								:key="item.value">
								<view>
									<radio
										color="#39B19D"
										:value="item.value"
										:checked="payType * 1 === index + 1" />
								</view>
								<view style="margin-left: 20rpx">{{ item.name }}</view>
							</view>
						</radio-group>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<view class="btn_box">
					<view class="container">
						<up-button
							class="bth"
							color="#39B19D"
							@click="cancel">
							取消
						</up-button>
						<up-button
							class="bth"
							color="#39B19D"
							@click="confirm">
							确认
						</up-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
import { formatDate } from '@/utils/formatDate';

export default {
	props: {
		payType: {
			default: '1',
		},
	},
	data() {
		return {
			view: {},
			count: -1,
			options: {
				list: [
					{
						value: '5',
						name: '储值机',
					},
					{
						value: '6',
						name: '余额',
					},
					// {
					// 	value: '8',
					// 	name: '电子票券',
					// },
				],
			},
			payIndex: '5',
			scrollTop: 0,
			selectRange: [],
		};
	},
	mounted() {
		// console.log('list', this.options);
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		cancel() {
			// TODO: 取消
			this.close();
		},
		confirm() {
			// TODO: 确认
			this.jump(this.payIndex);
		},
		submit() {
			if (this.checkFormList()) {
				// 提交数据
				const { title, num, money, min, start_time, end_time, room_type } =
					this.form;
				updateCouponSend({
					name: title,
					num,
					money,
					min,
					start_time,
					end_time,
					room_type,
					status: 1,
				}).then(res => {
					uni.showToast({
						title: '添加成功',
						duration: 1000,
					});
				});
			} else {
				uni.showModal({
					title: '系統提示',
					content: '請檢查是否填寫',
				});
			}
		},
		checkFormList() {
			const { title, num, money, min, start_time, end_time, room_type } =
				this.form;
			return (
				title && num && money && min && start_time && end_time && room_type
			);
		},
		formatDate(data) {
			return formatDate(data);
		},
		handSelectd(e) {
			this.payIndex = e.detail.value;
			// console.log('e.detail.value', e.detail.value);
			this.$emit('slectedPay', e.detail.value);
		},
		close() {
			this.$emit('close');
		},
		jump(data) {
			let url = '';
			switch (data) {
				case '5':
					url = '/pages/pay/slotMachines/slotMachines';
					break;
				case '6':
					url = '/pages/pay/predetermine/predetermine';
					break;
				default:
			}
			uni.navigateTo({ url });
		},
		upper(e) {
			// console.log(e);
		},
		lower(e) {
			// console.log(e, '已经滚动到底部');
		},
		scroll(e) {
			// console.log(e, '记录滚动相关的数据');
		},
	},
};
</script>

<style lang="scss" scoped>
.custom_pay {
	height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些
	.main {
		padding: 20rpx;
		.scroll_Y {
			width: 100%; // 滚动区域的宽度
			height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些
			.pay_wrap {
				width: 100%;
				height: 100%;
				.pay {
					width: 400rpx;
					padding: 0 200rpx;
					.pay_list {
						margin-bottom: 20rpx;
						display: flex;
						justify-content: flex-start;
					}
				}
			}
		}
		.footer {
			position: fixed;
			left: 0;
			bottom: $uni-spacing-col-base;
			width: 100%;

			background-color: $uni-color-white;
			.btn_box {
				padding: 10rpx;
				.container {
					padding: 0 $uni-spacing-row-base;
					display: flex;
					justify-content: space-around;
					.bth {
						width: 300rpx;
					}
				}
			}
		}
	}
}
</style>
